<template>
    <div class='uoloadItem'>
        <el-upload
            :headers="headers"
            :action="uploadUrl"
            list-type="picture-card"
            name="file"
            :before-upload="handleBeforeUpload"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :limit="1"
            :auto-upload="true"
            :ref="'upload' + imgname" 
            :file-list="fileList"
            :class="{hide:hideUpload}"
        ><i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                    <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                    >
                    <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                    >
                    <i class="el-icon-delete"></i>
                    </span>
                </span>
                </div>
        </el-upload>
        
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    name:"uploadItem",
    props:{
        item:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        imgname:{
            type:String,
            default:'img'
        }
    },
    watch:{
        item(val,lod){
            this.fileList =val[this.imgname] ? [val[this.imgname]]:[];
            // console.log(val)
            // console.log(this.fileList)
            this.hideUpload = this.fileList.length>0?true:false;
        }
    },
    mounted(){
        if(this.item&& this.item[this.imgname]){
            this.fileList =this.item[this.imgname] ? [this.item[this.imgname]]:[];
            this.hideUpload = this.fileList.length>0?true:false;
        }
    },
    computed:{
        
    },
    data(){
       return{
        uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        headers: {
            Authorization: "Bearer " + getToken()
        },
        fileList:[],
        limit:1,
        hideUpload:false,
       }
    },
    methods:{
        // 放大
        handlePictureCardPreview(file) {
            this.$emit('openimg',file.url)
            this.dialogVisible = true;
        },
        // 清除
        handleRemove(file){
            this.fileList = [];
            this.$refs['upload' + this.imgname].uploadFiles.splice(0, 1);
            this.item[this.imgname] = '';
            this.hideUpload = false;
        },
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
            console.log(file)
            let size = 10;
            // 校检文件大小
            if (size) {
                const isLt = file.size / 1024 / 1024 < size;
                if (!isLt) {
                    this.$message.error(`上传文件大小不能超过10MB!`);
                    return false;
                }
            }
            return true;
        },
        // 上传成功
        handleSuccess(res){
            res.name = res.realName;
            this.fileList = [res];
            this.item[this.imgname] = res;
            this.hideUpload = true;
            console.log(this.item)
        },
        
    }
}
</script>
<style scoped>
.uoloadItem{
    width: 100%;
    height: 150px;
    overflow: hidden;
}
.hide /deep/.el-upload--picture-card {
    display: none;
}
</style>